<script lang="ts" setup>
import type { FieldRule, FormInstance } from '@arco-design/web-vue'
// import { getApiResolveDomainsApi } from '@/apis/modules/resolve/domain'
// import { updateApiSiteApi } from '@/apis/modules/site/site'
import { Message } from '@arco-design/web-vue'
import {
  getCdnDomainListApi,
  updateCdnSiteClusterApi,
} from '@/apis/modules/cdn.ts'

interface EditCnameParams {
  resolve_domain_id?: string
  cname?: string
  site_id?: string
  siteName?: string
}
interface IProps {
  siteBase?: boolean
  record?: EditCnameParams
}
const props = withDefaults(defineProps<IProps>(), {
  siteBase: false,
})
const emit = defineEmits(['reload'])
const visible = defineModel<boolean>('visible', { required: true })
const domainOptions = ref<LabelValue[]>([])

const formRef = ref<FormInstance>()
const formState = reactive({
  resolve_domain_id: '',
  cname: '',
  site: '',
  siteName: '',
})
const rules: Record<string, FieldRule> = {
  resolve_domain_id: { required: true, message: '请选择域名' },
  cname: cnameRules,
  siteName: { required: true },
}
async function handleOpen() {
  try {
    const res = await getCdnDomainListApi({ limit: 0 })
    const list = res.list ?? []

    domainOptions.value = list
      .map(item => ({ label: item.name!, value: item.id! }))
      .filter(Boolean)
  } catch (error) {
    console.error(error)
  }

  formState.cname = props.record?.cname?.replace('site-', '') ?? ''
  formState.resolve_domain_id = props.record?.resolve_domain_id ?? ''
  if (props.siteBase) {
    formState.siteName = props.record?.siteName ?? ''
  }
}
async function handleSubmit() {
  const error = await formRef.value?.validate()

  if (error)
    return false
  const data = {
    id: props.record?.site_id ?? '',
    cname: `site-${formState.cname}`.toLocaleLowerCase(),
    resolve_domain_id: formState.resolve_domain_id,
  }
  return updateCdnSiteClusterApi(data).then(() => {
    Message.success('操作成功')
    emit('reload')
    visible.value = false
  })
}

function handleName() {
  formState.cname = randomCname()
}
function handleClose() {
  formRef.value?.resetFields()
}
</script>

<template>
  <resource-dialog
    v-model:visible="visible"
    title="编辑 CNAME"
    :width="480"
    :mask-closable="false"
    :before-open="handleOpen"
    :before-ok="handleSubmit"
    :before-close="handleClose"
    ok-text="保存"
  >
    <a-form
      ref="formRef"
      layout="vertical"
      :rules="rules"
      :model="formState"
    >
      <!-- <a-form-item
        v-if="record?.siteName"
        label="站点"
        field="siteName"
        hide-asterisk>
        <a-input v-model="formState.siteName!" disabled></a-input>
      </a-form-item> -->
      <a-form-item
        label=""
        field="cname"
        hide-asterisk
      >
        <section class="cloud-diverse-select w-full flex items-center">
          <a-input
            v-model="formState.cname"
            placeholder="请输入"
            class="h-32px"
            :max-length="20"
          >
            <template #prepend>
              site -
            </template>
            <template #suffix>
              <i-icons-refresh
                class="cursor-pointer !h-14px !w-14px hover:text-1"
                @click="handleName"
              />
            </template>
          </a-input>
          <!-- <span class="cname_dot">.</span> -->
          <a-select
            v-model="formState.resolve_domain_id"
            :options="domainOptions"
            placeholder="请选择域名"
            style="
              border-top: 1px solid #dfe2e5;
              border-right: 1px solid #dfe2e5;
              border-bottom: 1px solid #dfe2e5;
              background: #f7f8fa;
              border-radius: 0px 8px 8px 0px !important;
            "
          />
        </section>
      </a-form-item>

      <!-- <a-form-item label="域名" field="resolve_domain_id" hide-asterisk>
        <a-select
          v-model="formState.resolve_domain_id"
          :options="domainOptions"
          placeholder="请选择域名"></a-select>
      </a-form-item> -->
    </a-form>
  </resource-dialog>
</template>

<style lang="less" scoped>
.cloud-diverse-select {
  :deep(.arco-input-prepend) {
    border-radius: 8px 0px 0px 8px;
    border-top: 1px solid var(--border-2, #e5e6eb);
    border-left: 1px solid var(--border-2, #e5e6eb);
    border-bottom: 1px solid var(--border-2, #e5e6eb);
    border-right: none;
  }
  :deep(.arco-input-wrapper) {
    width: 260px;
    //border-left: none !important;
    border-radius: 0 !important;
  }
  :deep(.arco-select-view) {
    padding-left: 4px;
    border-left: none;
    border-radius: 0px 8px 8px 0px;
  }
}
</style>
